<script setup>
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import serachInput from '@/components/searchInput/serachInput.vue'
import addRole from './components/addRole.vue'
import tipButton from '@/components/customButton/tipButton.vue'

const { t } = useI18n()
const router = useRouter()

const data = Array.from({ length: 46 }).map((_, index) => ({
  name: `Edward King ${index}`,
  age: 32,
  address: `London, Park Lane no. ${index}`
}))

const goDetail = (row) => {
  router.push({
    path: '/home/device/deviceDetail'
  })
}

const columns = computed(() => {
  return [
    {
      title: t('permission.roleName'),
      key: 'name',
      fixed: 'left'
    },
    {
      title: t('permission.dataRange'),
      key: 'model'
    },
    {
      title: t('permission.permissionScope'),
      key: 'date'
    },
    {
      title: t('system.createTime'),
      key: 'version'
    },
    {
      title: t('system.operation'),
      key: 'state',
      fixed: 'right',
      render: (row) => {
        return [
          h(
            addRole,
            {
              btnProps: {
                quaternary: true
              },
              title: t('permission.editUser'),
              btnText: t('system.modify'),
              onComfirmHandle: () => {
                console.log('dinjil')
              },
              style: {
                marginRight: '2px'
              }
            },
            {}
          ),
          h(
            tipButton,
            {
              btnProps: {
                quaternary: true,
                type: 'Error'
              },
              btnText: t('system.delete'),
              text: t('system.deleteTip'),
              onComfirmHandle: () => {
                console.log('dinjil')
              },
              style: {
                marginRight: '2px'
              }
            },
            {}
          )
        ]
      }
    }
  ]
})

const checkedRowKeysRef = ref([])
const handleCheck = (rowKeys) => {
  checkedRowKeysRef.value = rowKeys
}

const valueChange = (keyword) => {
  console.log(keyword)
}

const deleteHandle = () => {
  console.log('点击了删除')
}
</script>

<template>
  <div class="p-6">
    <div class="flex items-center mb-4 flex-wrap">
      <addRole
        :title="t('permission.addRole')"
        :btn-text="t('system.add')"
        :btnProps="{ type: 'primary' }"
        style="margin-right: 10px"
      />
      <serachInput @valueChange="valueChange" />
    </div>
    <n-data-table
      :columns="columns"
      :data="data"
      :pagination="{ pageSize: 5 }"
      :row-key="(row) => row.address"
      @update:checked-row-keys="handleCheck"
      :scroll-x="1200"
    />
  </div>
</template>

<style scoped></style>
